<template>
  <div class='PhotoIdentification'>
    <div class="tit">
      <div>
        <span>照片鉴定</span>
      </div>
      <div class="xzxj" @click="openMap()">
        <span>新增相机</span>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="3">
        <el-select v-model="cardNum" clearable filterable @change="changecondition" placeholder="请选择卡编号">
          <el-option
            v-for="item in cardNumArr"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-col>

      <el-col :span="3">
        <el-select v-model="wanggeNum" clearable filterable @change="changecondition" placeholder="请选择网格编号">
          <el-option
            v-for="item in gridArr"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <el-date-picker
          style="width: 100%"
          @change="trandate"
          v-model="pst"
          type="daterange"
          range-separator="-"
          start-placeholder="开始布设日期"
          end-placeholder="结束布设日期">
        </el-date-picker>
      </el-col>
      <el-col :span="5">
        <el-date-picker
          style="width: 100%"
          @change="trandates"
          v-model="rst"
          type="daterange"
          range-separator="-"
          start-placeholder="开始回收日期"
          end-placeholder="结束回收日期">
        </el-date-picker>
      </el-col>
    </el-row>
    <!--d分页列表 B-->
    <div class="pifcr clearfix">
      <div class="pic" v-for="jd in pifL">
        <div class="im">
          <!--iscloud-->
          <img v-if="jd.coverImage==''" src="../../static/images/np.jpg" alt="">
          <img :src="iscloud(jd.coverImage)" v-else alt="">
          <div class="mes">
            <span>网格编号：{{ jd.oneKmGridNum }}</span>
            <span>未鉴定：{{ jd.unIdentifyImageNum }}</span>
          </div>
        </div>
        <div class="txt">
          <span>回收：{{ jd.recovDateLong | cDate }}&nbsp;&nbsp;人员：{{ jd.recovUser }}</span>&nbsp;
          <br/>
          <span>布设：{{ jd.layTimeLong | cDate }}&nbsp;&nbsp;人员：{{ jd.layUser }}</span>&nbsp;
          <span style="font-weight: 700;">卡编号：{{ jd.cameraCardId }}</span>
        </div>
        <div class="btn">
          <span class="s_bt"
                @click="open_upload(jd)"
                style="background-color: #00CC46;" v-if="abilityList.indexOf('edit')!=-1">上传</span>&nbsp;
          <span class="s_bt"
                @click="goauthenticate(jd)"
                style="background-color: #00CC46;">鉴定</span>&nbsp;
          <span class="s_bt" @click="fabu(jd)" style="background-color: #00CC46;"
                v-if="abilityList.indexOf('edit')!=-1">删除</span>&nbsp;
        </div>
      </div>
    </div>
    <!--d分页列表 E-->
    <!--分页 B-->
    <div class="pagecr">
      <!--:current-page.sync="currentPage"-->
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size=pageSize
        layout="total,prev, pager, next, jumper"
        :total=totalNumber>
      </el-pagination>
    </div>
    <!--分页 B-->

    <!--上传 B-->
    <div class="uploadBox" v-if="uploadBox">
      <div>
        <div class="photoList">
          <el-upload
            :data="upd.data"
            :action="upd.action"
            list-type="picture-card"
            accept="video/*||image/*"
            :auto-upload="false"
            ref="upload"
            multiple
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </div>

        <div class="start">
          <el-button size="mini" type="success" @click="submitUpload">开始上传</el-button>
          <el-button size="mini" type="primary" @click="closeuploadBox">结束上传</el-button>
        </div>

      </div>
    </div>
    <!--上传 E-->

    <!--弹窗 B-->
    <div class="xinzengpp" v-if="isXz">
      <div>
        <!--关闭 B-->
        <div class="xzpClose" @click.stop="resetForm('ruleForm')">
          <span class="el-icon-error"></span>
        </div>
        <!--关闭 E-->

        <!--地图区域 B-->
        <div class="MapContainer" style="height: 60%;">
          <Map ref="Mapc" @SonData="accept"></Map>
        </div>
        <!--地图区域 E-->

        <!--表单 B-->
        <div class="xzbdnr">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-row>
              <el-col :span="5">
                <el-form-item label="编号" prop="cameraCardId">
                  <el-input placeholder="请输入相机编号" v-model="ruleForm.cameraCardId"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="5">
                <el-form-item label="经度" prop="eastLongitude">
                  <el-input v-model="ruleForm.eastLongitude"
                            placeholder="例：116.46"
                            onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,4})?).*$/g, '$1')"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="5">
                <el-form-item label="纬度" prop="northernLatitude">
                  <el-input v-model="ruleForm.northernLatitude"
                            placeholder="例：49.46"
                            onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,4})?).*$/g, '$1')"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="3" style="height: 40px;line-height: 40px;margin-left: .2rem;">
                <span style="color: #666666">（可点击地图取点）</span>
              </el-col>

            </el-row>

            <el-row>
              <el-col :span="5">
                <el-form-item label="海拔">
                  <el-input placeholder="请输入海拔" v-model="ruleForm.altitude"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="坡度">
                  <el-select v-model="ruleForm.slope" placeholder="请选择坡度">
                    <el-option label="0~15°" value="0~15°"></el-option>
                    <el-option label="15~30°" value="15~30°"></el-option>
                    <el-option label="30~45°" value="30~45°"></el-option>
                    <el-option label="45~60°" value="45~60°"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="5">
                <el-form-item label="坡向">
                  <el-select v-model="ruleForm.exposure" placeholder="请选择坡向">
                    <el-option label="无" value="无"></el-option>
                    <el-option label="东" value="东"></el-option>
                    <el-option label="南" value="南"></el-option>
                    <el-option label="西" value="西"></el-option>
                    <el-option label="北" value="北"></el-option>
                    <el-option label="东南" value="东南"></el-option>
                    <el-option label="东北" value="东北"></el-option>
                    <el-option label="西南" value="西南"></el-option>
                    <el-option label="西北" value="西北"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="5">
                <el-form-item label="生境类型">
                  <el-select v-model="ruleForm.envirType" placeholder="请选择生境类型">
                    <el-option label="常阔" value="常阔"></el-option>
                    <el-option label="常阔混交" value="常阔混交"></el-option>
                    <el-option label="落阔" value="落阔"></el-option>
                    <el-option label="针阔混交" value="针阔混交"></el-option>
                    <el-option label="针叶林" value="针叶林"></el-option>
                    <el-option label="灌丛" value="灌丛"></el-option>
                    <el-option label="草坡" value="草坡"></el-option>
                    <el-option label="流石滩" value="流石滩"></el-option>
                    <el-option label="滩涂" value="滩涂"></el-option>
                    <el-option label="苇塘" value="苇塘"></el-option>
                    <el-option label="水面" value="水面"></el-option>
                    <el-option label="草甸" value="草甸"></el-option>
                    <el-option label="沼泽" value="沼泽"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

            </el-row>
          </el-form>
        </div>
        <!--表单 E-->

        <!--确认 取消 B-->
        <div
          style="width: 100%;height: 40px;line-height: 40px;text-align: center;position: absolute;left: 0;bottom: .2rem;">
          <el-button type="info" @click="resetForm('ruleForm')">取消</el-button>

          <el-button type="success" @click="submitForm('ruleForm')">确认保存</el-button>
        </div>
        <!--确认 取消 E-->

      </div>
    </div>
    <!--弹窗 E-->

  </div>
</template>
<script>
  import api from '../utils/api'
  import http from '../utils/http'
  import Map from './Map'

  export default {
    components: {
      'Map': Map
    },
    data() {
      return {
        areaId: "",
        cardNum: "",
        cardNumArr: [],
        pst: "",
        rst: "",
        t1: "",
        t2: "",
        pageNum: 1,
        pageSize: 8,
        totalNumber: 0,
        pifL: [],
        dialogImageUrl: '',
        dialogVisible: false,
        uploadBox: false,
        upd: {
          action: api.infrared.upload,
          data: {
            lon: "",
            lat: "",
            cameraEnvirId: "",
            altitude: "",
            areaId: ""
          }
        },
        currentPage: 1,
        abilityList: [],
        cardNumArr: [],
        gridArr: [],
        wanggeNum: "",
        //-----------------------------------------------------
        isXz: false,
        ruleForm: {
          cameraCardId: "",
          eastLongitude: '',
          northernLatitude: "",
          altitude: '',
          slope: '',
          exposure: '',
          envirType: '',
        },
        rules: {
          cameraCardId: [
            {required: true, message: '请输入相机编号', trigger: 'blur'}
          ],
          altitude: [
            {required: true, message: '请输入海拔', trigger: 'blur'}
          ],
          slope: [
            {required: true, message: '请选择坡度', trigger: 'change'}
          ],
          exposure: [
            {required: true, message: '请选择坡向', trigger: 'change'}
          ],
          envirType: [
            {required: true, message: '请选择生境类型', trigger: 'change'}
          ],
          eastLongitude: [
            {required: true, message: '请输入经度'}
          ],
          northernLatitude: [
            {required: true, message: '请输入纬度'}
          ],
        },
      }
    },
    mounted() {
    },
    created() {
      //获取areaid
      this.areaId = sessionStorage.getItem('areaId');
      this.abilityList = sessionStorage.getItem('abilityList')
      this.getcn();
      this.getCad();
      this.getpifList();
    },
    methods: {
      accept(data) {
        this.ruleForm.eastLongitude = data[0];
        this.ruleForm.northernLatitude = data[1];
      },
      openMap(data, type) {
        for (let key in this.ruleForm) {
          this.ruleForm[key] = ''
        }
        this.ruleForm['areaId'] = this.areaId;
        this.isXz = true;
        let vm = this;
        setTimeout(function () {
          vm.$refs.Mapc.creationMap();
        }, 300)
      },
      submitForm(formName) {
        let _this = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let _this = this, o = Object.assign({}, _this.ruleForm);
            (async function f() {
              let res = await http.post(api.addCameraEnvir, o)
              if (res.data.code == '200') {
                _this.$message({
                  message: '操作成功',
                  type: 'success'
                });
                _this.isXz = false;
                _this.getpifList();
              } else {
                _this.$message({
                  message: res.data.message,
                  type: 'warning'
                });
              }
            })()

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.isXz = false;
      },
      //1111111111111111111111111111111111111111111111111111111111111111111111111111111111
      getCad() {
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.getAreaGrid, {
            areaId: vm.areaId
          })
          vm.gridArr = res.data;
        })()
      },
      fabu(t) {
        if (t.unIdentifyImageNum > 0) {
          this.tiptext('已有上传照片不可删除');
          return false
        }
        /*if (t.unIdentifyImageNum != 0) {
          this.tiptext('全部鉴定完毕才能发布');
          return false
        }*/
        let vm = this;
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          (async function () {
            let res = await http.put(api.infrared.publish, {
              id: t.id
            })
            if (res.data.message == 'success') {
              vm.getpifList();
              vm.$message({
                message: '删除成功',
                type: 'success'
              });
            } else {
              vm.tiptext('删除失败，请稍后再试');
            }
          })()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });


      },
      //去鉴定
      goauthenticate(t) {
        if (t.imageTotalNum == 0) {
          this.tiptext('请上传为文件');
        } else {
          var vm = this;
          (async function () {
            let res = await http.get(api.infrared.grouping, {
              sampleId: t.id,
              status: 0
            })
            if (res.data.message == '成功') {
              vm.$router.push({
                path: '/Photo/PhotoIdentification/grouping',
                query: {id: t.id, card: t.cameraCardId, pageNum: vm.pageNum}
              });
            } else {
              alert(res.data.message)
            }
          })()

        }
      },
      //获取卡编号
      getcn() {
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.getCameraNumber, {
            areaId: vm.areaId,
            status: "recovery"
          })
          vm.cardNumArr = res.data;
        })()
      },
      trandate(daterange) {
        if (this.pst != null) {
          var year = daterange[0].getFullYear();
          var month = daterange[0].getMonth() + 1;
          var date = daterange[0].getDate();
          if (month >= 1 && month <= 9) {
            month = "0" + month;
          }
          if (date >= 0 && date <= 9) {
            date = "0" + date;
          }
          var t1 = year + "-" + month + "-" + date;
          var years = daterange[1].getFullYear();
          var months = daterange[1].getMonth() + 1;
          var dates = daterange[1].getDate();
          if (months >= 1 && months <= 9) {
            months = "0" + months;
          }
          if (dates >= 0 && dates <= 9) {
            dates = "0" + dates;
          }
          var t2 = years + "-" + months + "-" + dates;
          this.t1 = t1 + "~" + t2
        } else {
          this.t1 = "";
        }
        this.pageNum = 1;
        this.currentPage = 1;
        this.getpifList();
      },
      trandates(daterange) {
        if (this.rst != null) {
          var year = daterange[0].getFullYear();
          var month = daterange[0].getMonth() + 1;
          var date = daterange[0].getDate();
          if (month >= 1 && month <= 9) {
            month = "0" + month;
          }
          if (date >= 0 && date <= 9) {
            date = "0" + date;
          }
          var t1 = year + "-" + month + "-" + date;
          var years = daterange[1].getFullYear();
          var months = daterange[1].getMonth() + 1;
          var dates = daterange[1].getDate();
          if (months >= 1 && months <= 9) {
            months = "0" + months;
          }
          if (dates >= 0 && dates <= 9) {
            dates = "0" + dates;
          }
          var t2 = years + "-" + months + "-" + dates;
          this.t2 = t1 + "~" + t2
        } else {
          this.t2 = "";
        }
        this.pageNum = 1;
        this.currentPage = 1;
        this.getpifList();
      },
      //分页
      handleCurrentChange(val) {
        this.pageNum = val
        this.getpifList();
      },
      changecondition() {
        this.currentPage = 1;
        this.pageNum = 1;
        this.getpifList();
      },
      //照片鉴定列表
      getpifList() {
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.recoveriesByPage, {
            areaId: vm.areaId,
            cameraNumber: vm.cardNum,
            wanggeNum: vm.wanggeNum,
            layTime: vm.t1,
            recovTime: vm.t2,
            pageSize: vm.pageSize,
            pageNum: vm.pageNum
          })
          vm.pifL = res.data.content;
          vm.totalNumber = res.data.totalElements
        })()
      },
      open_upload(jd) {
        this.upd.data.cameraEnvirId = jd.id;
        this.upd.data.lon = jd.eastLongitude;
        this.upd.data.lat = jd.northernLatitude;
        this.upd.data.altitude = jd.altitude;
        this.upd.data.areaId = this.areaId;
        this.uploadBox = true;
      },
      submitUpload() {
        this.$refs.upload.submit();
      },
      closeuploadBox() {
        this.getpifList();
        this.uploadBox = false;
      },
      handleRemove(file, fileList) {

      },
      //判断云服务or本地服务
      iscloud(p) {
        if (p.split(":")[0] == 'http') {
          return p + '@oosImage|300h'
        }
        if (p.split(":")[0] == 'https') {
          return p + '?x-amz-process=image/resize,h_300,m_lfit'
        }
        return '/iapi' + p

      },
      tiptext(txt) {
        this.$message({
          message: txt,
          type: 'warning'
        });
      },
    },
    beforeRouteLeave(to, from, next) {
      from.meta.keepAlive = false;
      next()
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.getpifList();
      })
    }
  }
</script>
<style scoped>
  @import "../../static/css/PhotoIdentification.css";
</style>

